import { memo } from "react";
import { LongForWrapper } from "./style";
import ScrollView from "@/components/scroll-view";

const LongFor = memo((props) => {
  const { data = {} } = props;
  return (
    <LongForWrapper>
      <div className="header">
        <h2 className="title">{data.title}</h2>
        {data.subtitle && <div className="subtitle">{data.subtitle}</div>}
      </div>
      <div className="longfor-list">
        <ScrollView>
          {data.list.map((item, index) => {
            return (
              <div className="item" key={index}>
                <div className="inner">
                  <div className="item-info">
                    <img className="cover" src={item.picture_url} alt="" />
                    <div className="bg-cover"></div>
                    <div className="info">
                      <div className="city">{item.city}</div>
                      <div className="price">均价 {item.price}</div>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </ScrollView>
      </div>
    </LongForWrapper>
  );
});

export default LongFor;
